<template>
  <div>
    <div>
      <el-input v-model="pages.phone" placeholder="请输入手机号" style="width: 200px;display: inline-block" clearable />
      <el-select
          v-model="pages.role"
          placeholder="请选择角色"
          style="width: 200px;display: inline-block"
          clearable
      >
        <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-button icon="Search" style="margin-left: 10px" @click="search">查询</el-button>
    </div>
  <el-table :data="tableData" style="width: 100%;margin-top: 20px" >
    <el-table-column label="昵称">
      <template #default="scope">
        {{ scope.row.username }}
      </template>
    </el-table-column>

    <el-table-column label="电话" align="center">
      <template #default="scope">
        {{ scope.row.phone }}
      </template>
    </el-table-column>

    <el-table-column label="性别" align="center">
      <template #default="scope">
        <el-tag :type="scope.row.sex == 1 ? 'primary':'danger'">{{ scope.row.sex == 1 ? '男' : '女' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="角色">

      <template #default="scope">
        <el-tag :type="scope.row.role == 'manage' ? 'danger':'primary'" round>
        {{getRole(scope.row.role)}}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column label="注册日期">
      <template #default="scope">
        {{ scope.row.createTime}}
      </template>
    </el-table-column>

    <el-table-column label="操作" width="360" align="center">
      <template #default="scope">
        <el-button size="small"  @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination layout="prev, pager, next,sizes" :default-current-page="pages.page" :total="pages.total" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pages.limit"

                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />

  <el-dialog v-if="true" v-model="dialogFormVisible" title="编辑信息" width="500">
    <el-form :model="form">
      <el-form-item label="昵称:" >
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>

      <el-form-item label="电话:" >
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>

      <el-form-item label="性别:" >
        <el-select
            v-model="form.sex"
            placeholder="请选择性别"
            size="large"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
        <el-form-item label="角色:" >
          <el-select
              v-model="form.role"
              placeholder="请选择性别"
              size="large"
          >
            <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upData">
          更新
        </el-button>
      </div>
    </template>
  </el-dialog>

  </div>
</template>

<script lang="ts" setup>
import {Timer, User} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

import { onBeforeMount, onMounted } from "vue";
import http  from "@/util/http-util";
import {ElMessage} from "element-plus";

interface User {

  create_time: string
  // name: string
  username :string
  sex: string
  phone:string
  address: string

}

const options = ref([
  {
    value: 1,
    label: '男',
  },
  {
    value: 2,
    label: '女',
  }
])

const roleOptions = ref([
  {
    value: 'manage',
    label: '管理员',
  },
  {
    value: 'consume',
    label: '普通用户',
  }
])
const dialogFormVisible = ref(false)
const upData = () => {

  http.POST("/manage/updateUserInfo",form.value).then((response) => {
     if (response.code == 0){
       ElMessage.success("更新成功")
       dialogFormVisible.value = false;
       loadData();
     }
  })

}

const search = ()=>{
  pages.value.page =1;
  loadData();
}

const handleSizeChange = (val: number) => {
  pages.value.limit = val;
  loadData();
}
const handleCurrentChange = (val: number) => {
  pages.value.page = val;
  loadData();
}

const handleEdit = (index: number, row: User) => {
  dialogFormVisible.value = true
  form.value = {...row};
}
const handleDelete = (index: number, row: User) => {
  console.log(row.username)
  http.POST("/manage/deleteUser",row).then((response) => {
    if (response.code == 0) {
      ElMessage.success("删除成功");
      loadData();
    }
  })
}

const getRole = (v)=>{
  for (let i in v){
    if (roleOptions.value[i].value == v){
      return roleOptions.value[i].label;
    }
  }
  return "未知";
}


const tableData = ref<User[]>([

])


const form = ref({
  create_time:'',
  username: '',
  phone: '',
  sex:'',
  role: '',
})

const pages = ref({
  total:0,
  limit:10,
  page:1,
  phone:undefined,
  role:'consume',
});

const loadData = ()=>{
  console.log("ppp",pages.value)
  http.GET("/manage/getAllUser",pages.value).then((res)=>{
    tableData.value = res.data.records;
    pages.value.total =  res.data.total;
  })
}

onBeforeMount(()=>{
  loadData();
})
</script>